
import { Card, CardContent } from "@/components/ui/card";
import { Link } from "react-router-dom";
import { useLanguage } from "@/contexts/LanguageContext";
import { 
  BookOpen, 
  Lightbulb, 
  Settings, 
  BarChart3, 
  Users 
} from "lucide-react";

export const ModuleCards = () => {
  const { t } = useLanguage();

  const modules = [
    {
      title: t('modules.resources.title'),
      description: t('modules.resources.description'),
      icon: <BookOpen className="w-8 h-8" />,
      href: "/resources",
      color: "bg-blue-100 text-blue-600",
      hoverColor: "hover:bg-blue-50"
    },
    {
      title: t('modules.pbl.title'),
      description: t('modules.pbl.description'),
      icon: <Lightbulb className="w-8 h-8" />,
      href: "/pbl-workshop",
      color: "bg-green-100 text-green-600",
      hoverColor: "hover:bg-green-50"
    },
    {
      title: t('modules.builder.title'),
      description: t('modules.builder.description'),
      icon: <Settings className="w-8 h-8" />,
      href: "/smart-builder",
      color: "bg-purple-100 text-purple-600",
      hoverColor: "hover:bg-purple-50"
    },
    {
      title: t('modules.analytics.title'),
      description: t('modules.analytics.description'),
      icon: <BarChart3 className="w-8 h-8" />,
      href: "/analytics",
      color: "bg-yellow-100 text-yellow-600",
      hoverColor: "hover:bg-yellow-50"
    }
  ];

  return (
    <section className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
            Advanced Teaching Tools
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            {t('modules.subtitle')}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
          {modules.map((module, index) => (
            <Link key={index} to={module.href}>
              <Card className={`h-full hover:shadow-lg transition-all duration-300 border border-gray-200 ${module.hoverColor} cursor-pointer group`}>
                <CardContent className="p-6 text-center">
                  <div className={`w-16 h-16 ${module.color} rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform`}>
                    {module.icon}
                  </div>
                  <h3 className="text-lg font-semibold mb-3 text-gray-900">
                    {module.title}
                  </h3>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {module.description}
                  </p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
};
